<script setup lang="ts">
import { onMounted, Ref, ref } from "@vue/runtime-core";
import throttle from "loadsh/throttle";
const props = defineProps({
  list: {
    type: Array as any,
    required: true,
  },
  distance: {
    type: [Number, String],
    default: 100,
  },
  finished: {
    type: Boolean,
    required: true,
  },
});

const emit = defineEmits({
  getData: null,
});

/**
 * @description 变量
 */

let scrollClientHeight: Ref<Number> = ref(0);
let scrollList = ref(null);
let isSend = ref(false);

/**
 * @description 方法
 */
const scroll = throttle(function (e: any) {
  if (props.finished) return;
  if (
    e.target.scrollHeight - e.target.scrollTop - scrollClientHeight.value <
      Number(props.distance) &&
    !isSend.value
  ) {
    isSend.value = true;
    emit("getData");
  }
}, 800);

/**
 * @description 生命周期
 */
onMounted(() => {
  scrollClientHeight.value = scrollList.value?.clientHeight;
});

defineExpose({
  isSend,
});
</script>

<template>
  <div class="scrollList" ref="scrollList" @scroll="scroll">
    <div class="item_slot" v-for="item in list" :key="item.id">
      <slot name="item" :row="item"></slot>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.scrollList {
  height: calc(100vh - 70px);
  overflow-y: auto;
  padding: 15px 0px;

  .item_slot {
    padding: 10px 30px;
    cursor: pointer;
    margin-bottom: 5px;
    &:hover {
      background-color: #ededed;
    }
  }
}
</style>